<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <h2>导航</h2>
        <el-menu
            @select="select"
        >
          <el-menu-item v-for="(menu, i) in top" :key="i" :index="i.toString()">
            {{ menu.title }}
          </el-menu-item>
        </el-menu>
        <el-menu
          @select="select"
          >
          <el-submenu v-for="(group, index) in navigation" :key="index" :index="index.toString()">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>{{ group.title }}</span>
            </template>
            <el-menu-item v-for="(menu, i) in group.menu" :key="i" :index="index.toString() + ',' + i.toString()">
              {{ menu.title }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      top: [
        {
          route: "/home",
          title: "主页",
        },
        {
          route: "/about",
          title: "关于",
        },
      ],
      navigation: [
        {
          title: "介绍",
          menu: [
            {
              route: "/introduce/hello",
              title: "hello",
            },
            {
              route: "/introduce/ifelse",
              title: "ifelse",
            },
            {
              route: "/introduce/for",
              title: "for",
            },
            {
              route: "/introduce/watcher",
              title: "watcher",
            },
            {
              route: "/introduce/event",
              title: "event",
            },
          ],
        },
        {
          title: "组件",
          menu: [
            {
              route: "/component",
              title: "component",
            },
          ]
        },
        {
          title: "路由",
          menu: [
            {
              route: "/router/main",
              title: "router",
            },
          ]
        },
      ],
      index: "",
    }
  },
  components: {
  },
  methods: {
    select: function (index) {
      if (index === this.index)
        return
      let is = index.split(",")
      if (is.length === 1) {
        this.$router.push(this.top[parseInt(is[0])].route)
      } else {
        let i1 = parseInt(is[0])
        let i2 = parseInt(is[1])
        this.$router.push(this.navigation[i1].menu[i2].route)
      }
      this.index = index
    },
  },
}
</script>

<style>
#app {
  color: #2c3e50;
}
</style>
